<template>
  <!-- 搜索框 -->
  <van-search
    v-model="value"
    show-action
    placeholder="搜索心里问题或咨询名师姓名"
  >
    <template #action>
      <span><img src="../../assets/img/imgdong/phone.png" alt="" /></span>
      <span class="span2"
        ><img src="../../assets/img/imgdong/consult.png" alt=""
      /></span>
    </template>
  </van-search>
  <main>
    <div class="pic">
      <ul>
        <li v-for="item in picData" :key="item"><img :src="item" alt="" /></li>
      </ul>
    </div>
    <!--分类模块 -->
    <van-sticky :offset-top="77">
      <van-dropdown-menu active-color="red">
        <van-dropdown-item
          :title="title || '全部商品'"
          ref="items"
          @open="scrolltop"
        >
          <div class="num1">
            <p class="topic">服务种类</p>
            <ul class="theme">
              <keep-alive>
                <li
                  v-for="(item, index) in data"
                  :key="index"
                  @click="changetitle(item, index)"
                  :class="{ active1: index == nowindex }"
                >
                  {{ item }}
                </li>
              </keep-alive>
            </ul>
            <div style="padding: 5px 16px">
              <van-button type="danger" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="titlecity" @open="scrolltop">
          <van-sidebar v-model="active">
            <van-sidebar-item
              v-for="item in city"
              :key="item.cityId"
              @click="change(item.name)"
            >
              <template #title>
                {{ item.name }}
              </template>
            </van-sidebar-item>
          </van-sidebar>
        </van-dropdown-item>
        <van-dropdown-item :title="titleorder" @open="scrolltop">
          <div class="order">
            <div
              v-for="(item, index) in order"
              :key="index"
              @click="changorder(item)"
            >
              {{ item }}
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="itemsb" @open="scrolltop">
          <div class="num2">
            <p>咨询方式</p>
            <div class="btn">
              <van-button
                plain
                type="primary"
                v-for="(v, index) in button"
                :key="index"
                :text="v.text"
                class="active"
              ></van-button>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="danger" block round @click="onConfirmb">
                确认
              </van-button>
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <ul class="item">
        <li v-for="(item, index) in choosePeole" :key="index">{{ item }}</li>
      </ul>
    </van-sticky>
  </main>
  <section>
    <van-list
      v-model:loading="state1.loading"
      :finished="state1.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div style="height: 180px" v-for="item in state1.list" :key="item.name">
        <div class="intrduce-img">
          <img :src="item.img" alt="" />
        </div>
        <div class="intrduce-desc">
          <p class="name">{{ item.name }}</p>
          <p class="serial">{{ item.personal }}</p>
          <p>
            <van-rate v-model="item.star" readonly allow-half /><span
              class="span1"
              >{{ item.evaluate }}评价</span
            >
          </p>
          <p class="people">
            <span class="span5">帮助{{ item.assistance }}人</span
            ><span class="span3">服务{{ item.items }}小时</span>
          </p>
          <p class="detail">
            <span>婚恋家庭</span><span>婚恋家庭</span><span>婚恋家庭</span>
          </p>
        </div>
        <div class="intrduce-action">
          <p class="actionOne">￥{{ item.price }}元起</p>
          <p class="actionTwo">{{ item.city }}</p>
          <span class="actionThree" @click="chat">{{ item.chat }}</span>
        </div>
      </div>
    </van-list>
  </section>
</template>

<script>
import { ref, reactive, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 筛选按钮内容
    const button = reactive([
      { text: "文字" },
      { text: "电话" },
      { text: "当面" },
      { text: "视频" },
    ]);
    const items = ref(null);
    const itemsb = ref(null);
    // 搜索框的数据
    const value = ref("");
    // 图片的数据
    const picData = [
      require("../../assets/img/imgdong/pic1.png"),
      require("../../assets/img/imgdong/pic2.png"),
      require("../../assets/img/imgdong/pic3.png"),
      require("../../assets/img/imgdong/pic4.png"),
    ];
    // 预约的数据
    const choosePeole = reactive([
      "今天可预约",
      "现在有空",
      "男咨询师",
      "女咨询师",
    ]);
    // 全部商品的数据集合
    const data = reactive([
      "全部",
      "恋爱情感",
      "婚姻家庭",
      "亲子教育",
      "人际社交",
      "职场发展",
      "个人成长",
      "情绪压力",
      "心里健康",
      "法律咨询",
    ]);
    let nowindex = ref(0);
    // 全部商品的点击事件，赋值给title
    const title = ref("全部商品");
    // 全部商品的新数组
    const list = ref([]);
    const changetitle = (val, index) => {
      // console.log(index);
      if (list.value.indexOf(val) === -1) {
        list.value.push(val);
        nowindex.value = index;
        title.value = val;
      } else {
        list.value.splice(list.value.indexOf(val), 1);
        nowindex.value = "";
        title.value = "";
      }
    };
    const onConfirm = () => {
      items.value.toggle();
    };
    // 获取咨询详情的数据方法
    const store = useStore();
    const consuData = computed(() => store.state.Consu.consuData);
    const consultdata = () => {
      return store.dispatch("getCon");
    };
    onMounted(() => {
      consultdata();
    });
    //  获取城市数据
    const titlecity = ref("地区");
    const change = (val) => {
      titlecity.value = val;
    };
    const city = computed(() => store.state.Consu.citylist);
    const getcitylist = () => {
      return store.dispatch("getcitydata");
    };
    onMounted(() => {
      getcitylist();
    });
    //  获取排序的数据
    const titleorder = ref("排序");
    const order = reactive([
      "综合排序",
      "品质优先",
      "低价优先",
      "好评优先",
      "销量优先",
    ]);
    const changorder = (val) => {
      return (titleorder.value = val);
    };
    // 下拉选型
    const active = ref(0);
    // 跳转到详情页面
    const router = useRouter();
    // const jumpDetail = (id) => {
    //   router.push("/consultdet/" + id);
    // };
    const state1 = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    // 上拉加载
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          state1.list.push(
            consuData.value.slice(state1.list.length, state1.list.length + 1)[0]
          );
        }
        // 加载状态结束
        state1.loading = false;
        // 数据全部加载完成
        if (state1.list.length >= 25) {
          state1.finished = true;
          // 加载状态结束
          state1.loading = false;
          state1.list.length=25;
        }
      }, 1000);
    };
    const onConfirmb = () => {
      itemsb.value.toggle();
    };
    const scrolltop = () => {
      document.documentElement.scrollTop = 266;
    };
    // 私聊加工厂
    const chat = () => {
      router.push("/chat");
    };
    return {
      // 点击选项，滚动条上升
      scrolltop,
      itemsb,
      items,
      // 搜索框的双向绑定数据
      value,
      // 下来选项的数据
      // state,
      // 图片的数据
      picData,
      // 预约选型
      choosePeole,
      // 详情数据
      consuData,
      // 获取数据的方法
      consultdata,
      // 跳转到详情页
      // jumpDetail,
      // 上拉加载
      state1,
      onLoad,
      // 侧边栏导航
      active,
      // 全部商品的数据
      data,
      // 全部商品标题头的数据
      title,
      changetitle,
      // 城市相关的数据
      city,
      getcitylist,
      // 改变选中地区数据
      titlecity,
      // 改变城市的方法
      change,
      // 排序的数据
      order,
      titleorder,
      // 改变排序的方法
      changorder,
      onConfirm,
      onConfirmb,
      button,
      nowindex,
      // 私聊
      chat,
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.van-sticky {
  background: #fff;
}
// 下拉选项的定位
.van-dropdown-menu {
  margin-left: -10px;
}
// 不移出隐藏
/deep/.van-ellipsis {
  overflow: visible;
}
// 下拉定位框的背景颜色
/deep/.van-overlay {
  background: #fff;
  z-index: 2;
}
// 全部商品样式
.num1 {
  margin-left: 14.5px;
}
.topic {
  font-weight: 700;
  font-size: 16px;
}
.theme {
  font-size: 14px;
  color: black;
  li {
    float: left;
    background: #fff;
    width: 29%;
    height: 33px;
    margin-top: 15px;
    margin-left: 4%;
    padding: 0 4px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    line-height: 33px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
// 排序样式
.order {
  // margin: 0 auto;
  font-size: 16px;
  div {
    margin: 10px;
    margin-left: 150px;
  }
}
// 地区显示的样式
/deep/.detail {
  flex: 1;
  margin-top: 15px;
  li {
    height: 40px;
    line-height: 40px;
  }
}
// 更改侧边栏颜色
.van-sidebar-item--select::before {
  background-color: blue;
}
// 上方搜索框样式
.van-search {
  width: 100%;
  border-bottom: 1px solid #e3e3e4;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2017;
}
.span2 {
  margin-left: 19px;
}
// 第二部分样式
main {
  box-sizing: border-box;
  padding-left: 11.5px;
  width: 100%;
  height: 250px;
  border-bottom: 1px solid #e3e3e4;
  margin-top: 80px;
}
// 图片的样式
.pic {
  width: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 175px;
      height: 90px;
      margin-right: 3px;
      margin-bottom: 3px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 预约专家模块样式
.item {
  margin-left: -10px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  li {
    width: 79px;
    height: 20px;
    background: #f7f7f7;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    color: #4d4d4d;
    margin-right: 9px;
  }
}
/deep/.van-sidebar {
  width: 100px;
}
.num2 {
  margin-left: 12px;
  .btn {
    margin-left: 40px;
  }
}
// 第三部分
/deep/.van-list {
  margin-bottom: 30px;
  padding: 0 10.5px;
}

/deep/.intrduce-img {
  margin-top: 15px;
  width: 89px;
  height: 127.5px;
  float: left;
  img {
    width: 89px;
    height: 137.5px;
    border-radius: 8px;
  }
}
.intrduce-desc {
  margin-top: 10px;
  width: 180px;
  height: 127.5px;
  float: left;
  margin-left: 10px;
  font-size: 14px;
  p {
    margin: 0;
    margin: 8px 0;
  }
}
.detail {
  span {
    color: #bfbfbf;
    display: inline-block;
    border: 1px solid #bfbfbf;
    margin-right: 2px;
    border-radius: 5px;
  }
}
.actionOne {
  color: red;
}
.actionTwo {
  color: #7d7d7d;
}
.intrduce-action {
  margin-top: 6px;
  width: 70px;
  height: 127.5px;
  float: right;
  font-size: 10px;
}
/deep/.actionThree {
  display: block;
  margin-top: 65px;
  height: 22px;
  width: 53px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #ffffff;
  background: #54abf1;
  border-radius: 11px;
}
/deep/.van-button--primary {
  margin-right: 10px;
}
.active:hover {
  background: #3ca2f5;
  color: white;
}
/deep/.active1 {
  color: red;
}
</style>
